<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Swiper demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" type="text/css" href="css/animate.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/new_file.css"/>
    <link rel="stylesheet" type="text/css" href="css/iconfont.css"/>

    <!-- Demo styles -->

</head>
<body>
	<audio id="audio" src="img/cc.mp3" autoplay="autoplay"></audio>
    <!-- Swiper -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
        	<!--第一屏开始-->
            <div class="swiper-slide one">
            	<img src="img/1.png" alt="" class="one1 ani" data-slide-in="at 500 from fadeInDown use swing during 2000" />
            	<img src="img/2.png" alt="" class="one2 ani" data-slide-in="at 2200 from bounceIn use swing during 1500" />
            	<img src="img/3.png" alt="" class="one3 ani" data-slide-in="at 2700 from fadeInLeft use swing during 2300" />
            	<img src="img/4.png" alt="" class="one4 ani" />
            	<img src="img/5.png" class="one5 ani" data-slide-in="at 500 from fadeInUp use swing during 2000" />
            	<img src="img/6.png" class="one6 ani" alt="" data-slide-in="at 300 from fadeInRight use swing during 2000" />
            	<img src="img/7.png" class="one7 ani" data-slide-in="at 1300 from fadeInRight use swing during 2000" />

            </div>
            <!--第一屏结束-->
            <!--第二屏开始-->
            <div class="swiper-slide two">
            	<img src="img/21.png" alt="" class="two21" />
            	<img src="img/22(1).png" alt="" class="two22_1 ani"  data-slide-in="at 500 from fadeInDown use swing during 2000"  />
            	<img src="img/22(2).png" alt="" class="two22_2 ani" data-slide-in="at 500 from fadeInRight use swing during 2000"  />
            	<img src="img/23.png" alt="" class="two23 ani"  data-slide-in="at 800 from zoomIn use swing during 5000"  />
            	<img src="img/23 (2).png" alt="" class="two23_2 ani"   data-slide-in="at 1200 from zoomIn use swing during 2000" data-slide-out="at 0 to fadeOut use swing during 1000 force"/>
            	<img src="img/23(3).png" alt="" class="two23_3 ani"  data-slide-in="at 1200 from zoomIn use swing during 2000" data-slide-out="at 0 to fadeOut swing during 1000 force" />
            	<img src="img/24.png" alt="" class="two24 ani"  data-slide-in="at 2500 from fadeInUp use swing during 2000"  />
            	<img src="img/25.png" alt="" class="two25 ani"  data-slide-in="at 3500 from fadeInDown use swing during 2000"  />
            	<img src="img/26.png" alt="" class="two26 ani"  data-slide-in="at 3500 from bounceIn use swing during 2000"  />
            	<img src="img/27.png" alt="" class="two27 ani"  data-slide-in="at 3500 from fadeInRight use swing during 500"  />

            </div>
            <!--第二屏结束-->
            <!--第三屏开始-->
            <div class="swiper-slide thr">
            	<img src="img/31.png" alt=""  class="thr1"/>
            	<img src="img/31.5.png" class="thr0"/>
            	<img src="img/32 (1).png" alt="" class="thr2 ani"  data-slide-in="at 500 from fadeInLeft use swing during 500" data-slide-out="at 0 to fadeOutLeft use swing during 1000 force" />
            	<img src="img/32 (2).png" alt="" class="thr3 ani"  data-slide-in="at 500 from fadeInRight use swing during 500" data-slide-out="at 0 to fadeOutRight use swing during 1000 force" />         
            	<img src="img/33.png" alt="" class="thr4 ani"  data-slide-in="at 1500 from fadeIn use swing during 2000"  />
            	<img src="img/34.png" alt=""  class="thr5 ani"  data-slide-in="at 3000 from fadeInUp use swing during 1500" />
            	<img src="img/35.png" alt="" class="thr6 ani" data-slide-in="at 3500 from fadeInDown use swing during 1500"/>
            	<img src="img/36.png" alt="" class="thr7 ani" data-slide-in="at 3500 from fadeIn use swing during 2000" />
            	<img src="img/37.png" class="thr8 ani" data-slide-in="at 3700 from fadeInLeft use swing during 1000" />            	
            	<img src="img/38.png" alt="" class="thr9 ani"  data-slide-in="at 4000 from fadeInDown use swing during 1500"  />
            	<img src="img/39.png" alt="" class="thr10 ani" data-slide-in="at 4000 from fadeInUp use swing during 1500"  />
            </div>
            <!--第三页结束-->
            <!--第四页开始-->
            <div class="swiper-slide si">
            	<img src="img/41.png" alt=""  class="si1 ani"  data-slide-in="at 500 from fadeInRight use swing during 200" data-slide-out="at 0 to fadeOutRight use swing during 200 force"  /> 
<img src="img/41.5.png" alt=""  class="si1_ ani" data-slide-in="at 3500 from fadeInUp use swing during 1000"/>
            	<img src="img/42.png" class="si2 ani" data-slide-in="at 1500 from fadeInUp use swing during 1500"/>
            	
            	<img src="img/43.png" class="si3 ani" data-slide-in="at 2500 from fadeInUp use swing during 1500"/>
            	<img src="img/44.png" class="si4 ani" data-slide-in="at 2500 from fadeInDown use swing during 1500"/>
            	    <img src="img/45.png" alt="" class="si5 ani" data-slide-in="at 4000 from bounceIn use swing during 1500" />
            	    <img src="img/46.png" alt="" class="si6 ani" data-slide-in="at 4500 from bounceIn use swing during 1500"  />
            	    <img src="img/47.png" alt="" class="si7 ani"  data-slide-in="at 4500 from rotateInUpLeft use swing during 500" />
            </div>
            <!--第四页结束-->
            
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
       
    </div>

  <span id="zhuan"><i class="iconfont icon-yinle"></i></span>

    <!-- Swiper JS -->
    <script src="js/swiper.min.js"></script>
    	<script src="js/swiper.animate-twice.min.js" type="text/javascript" charset="utf-8"></script>
      <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <!-- Initialize Swiper -->
    <script>
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        direction: 'vertical',
                onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
		    swiperAnimateCache(swiper); //隐藏动画元素 
		    swiperAnimate(swiper); //初始化完成开始动画
		  }, 
		onSlideChangeEnd: function(swiper){ 
		    swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
		  } 
    });
    
//  ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
//先引入jQ文件
//等待全文函数开始
$(function(){
	
//	    然后创建点击按钮事件

     	$("#zhuan").click(function(){
     		var audio=document.getElementById('audio');
//   		由于音乐停止方法audio.play是js方法,所以必须用js方法抓取audio并且不能同时用$()+play这种写法
//      如果音乐是停止状态paused则播放音乐,audio.play()
               if(audio.paused){
                     audio.play();
//      	并且将转动的元素重新声明运动属性值
        	$("#zhuan").css({'animation':'run 1s linear infinite'});        	
               }else{
//      	否则,如果是停止状态,就运行音乐,audio.pause();
        	audio.pause();
//      	并且将转动的元素重新回归正确的运动属性值
        	$("#zhuan").css({'animation':'a 1s linear infinite'});
        }
		
     	})
//   	点击事件结束
//   	等待全文函数结束
     	})
    </script>
  

</body>
</html>